import React, { Component } from 'react'
import { handleResize } from '../Tools/window.js'
import Pagination from './Pagination.js'

const selectRows ={
    
}

export default class Table extends Component {
    state ={
        tableHeight: 300
    }
    
    componentDidMount(){
        handleResize(this)
    }

    
    handleCheck(row,e){

        let rows

        const{ onSelect } = this.props.rowSelection

        if(e.target.checked){
            selectRows[row.id] = row
        }else{
            delete selectRows[row.id]
        }
        // console.log("26...",selectRows)
        rows = Object.keys(selectRows).map(key =>selectRows[key])

        // console.log(Object.keys(selectRows))
        // console.log("28..",rows)
        onSelect && onSelect(row ,rows)
    }

    handlePage=( page ,pageSize )=>{
        // console.log(page, pageSize)
        // this.props.pagination.onChange(page, pageSize)
        this.props.pagination.onChange(page, pageSize)
    }
    
    render() {

    const { columns, dataSource, showIndex, rowSelection, pagination} = this.props
    const { current, pageSize} = this.state
        // console.log(dataSource)

    return (
        <section className="content container-fluid">
            <div style={{ height: this.state.tableHeight, overflow: 'auto' }} >
                <table className="table table-bordered table-hover">
                    <thead>
                        <tr>
                        {rowSelection&&<th style={{ width:30}}>
                                <input type="checkbox" />
                            </th>}
                         {showIndex&&<th style={{width:30}}>#</th>}
                            {
                            columns.map((item,index)=>(
                                <th key={ 'th'+ index}>{item.title}</th>
                             ))
                            }
                        </tr>
                    </thead>
                    <tbody>
                        {
                         dataSource.map((row,index) => (
                           <tr key={'tr'+ index}>
                             {rowSelection && <td style={{ width: 30 }}>
                                    <input onClick={this.handleCheck.bind(this,row)} type="checkbox"/>
                                </td>}
                             {showIndex && <td>{index + 1}</td>}
                              {
                                columns.map((item,index)=>(
                                  <td key={'td'+ index}>{row[item.dataIndex]}</td> 
                                ))
                              }
                           </tr>
                        ))
                        }
                    </tbody>
                </table>

                {
                 pagination !== false && <Pagination 
                    current={pagination.current}
                    pageSize={pagination.pageSize}
                    total={pagination.total} onChange={this.handlePage}
                   />
                }
           
            </div> 
        </section>
    )
  }
}   

